<h4>Basic</h4>
<d-tag [tag]="'default color'"></d-tag>
<d-tag [tag]="'label color1'" [labelStyle]="'blue-w98'"></d-tag>
<d-tag [tag]="'label color2'" [labelStyle]="'aqua-w98'"></d-tag>
<d-tag [tag]="'label color3'" [labelStyle]="'olivine-w98'"></d-tag>
<d-tag [tag]="'label color4'" [labelStyle]="'green-w98'"></d-tag>
<d-tag [tag]="'label color5'" [labelStyle]="'yellow-w98'"></d-tag>
<d-tag [tag]="'label color6'" [labelStyle]="'orange-w98'"></d-tag>
<d-tag [tag]="'label color7'" [labelStyle]="'pink-w98'"></d-tag>
<d-tag [tag]="'label color8'" [labelStyle]="'red-w98'"></d-tag>
<d-tag [tag]="'label color9'" [labelStyle]="'purple-w98'"></d-tag>
<d-tag [tag]="'custom color#F50'" [customColor]="'#f50'"></d-tag>
<d-tag [tag]="'custom style'" [labelStyle]="'tag-custom'" [titleContent]="'hello'"></d-tag>
<h4>Deletable</h4>
<d-tag [tag]="deleteTagName1" [mode]="'closeable'" (tagDelete)="getTagValue($event); deleteTag($event)"></d-tag>
<d-tag [tag]="deleteTagName2" [mode]="'closeable'" [labelStyle]="'aqua-w98'" (tagDelete)="getTagValue($event); deleteTag($event)"></d-tag>
<h4>Custom</h4>
<d-tag [tag]="tagName" (tagDelete)="getTagValue($event); deleteTag($event)" [customViewTemplate]="customTag"> </d-tag>
<d-tag [tag]="tagName" (tagDelete)="getTagValue($event); deleteTag($event)" [labelStyle]="'purple-w98'" [customViewTemplate]="customTag">
</d-tag>
<h4>Can be selected</h4>
<d-tag
  *ngFor="let tag of tagList; let i = index"
  [mode]="'checkable'"
  [(checked)]="tag.checked"
  [tag]="tag.name"
  [labelStyle]="tag.type"
  [customColor]="tag.custumColor"
  (checkedChange)="changeChecked($event)"
></d-tag>
<ng-template #customTag let-tag="tag">
  <span class="icon-bug" style="vertical-align: text-bottom; padding-right: 4px"></span>
  <span title="{{ tag }}">{{ tag }}</span>
</ng-template>
<h4>Exceeding the maxWidth to hide</h4>
<d-tag [tag]="'this is a long long tag'" [labelStyle]="'aqua-w98'" [maxWidth]="'100px'"></d-tag>
